<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>全选</button>
    <button>不选</button>
    <button>反选</button>
    <div>
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>
    <script>
 // 获取button按钮的元素集合，循环绑定点击事件
    var btn = document.getElementsByTagName('button');

    // 需要改变 复选框的状态，所以需要获取这些复选框
    var inputs = document.getElementsByTagName('input');

    for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            // 通过this 拿到点击的这个元素
            // 怎么通过这个元素去判断我实现哪个功能
            // 获取元素的内容进行判断，然后去写相应的功能 this.innerHTML
            if (this.innerHTML === '全选') {
                // 循环给每一个input添加 checked = true
                for (var j = 0; j < inputs.length; j++) {
                    inputs[j].checked = true;
                }
            } else if (this.innerHTML === '反选') {
                // 已经选上 把勾去掉 checked状态为true 需要改变为 false
                // 未勾上的 需要勾上 checked状态false 需要改为 true
                for (var j = 0; j < inputs.length; j++) {
                    // 循环把状态改变为 和以前相反的状态
                    // 执行顺序从右到左，赋值运算优先级最低，先获取input元素checked的状态并且取反，然后再把这个值赋值给input的checked属性
                    inputs[j].checked = !inputs[j].checked;
                }

            } else if (this.innerHTML === '不选') {
                // 循环的把每一个input的 checked状态改为 false
                for (var j = 0; j < inputs.length; j++) {
                    inputs[j].checked = false;
                }
            }
        }
    }
    </script>
</body>
</html>